<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
    String path = request.getContextPath();
    request.setAttribute("path", path);
    Object msg = request.getAttribute("msg");
    request.setAttribute("msg",msg);
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="${path}/jbs/css/style.css"/>
    <script src="${path}/jbs/js/iepng.js" type="text/javascript"></script>
    <script type="text/javascript">
        EvPNG.fix('div, ul, img, li, input, a');
    </script>
    <script type="text/javascript" src="${path}/jbs/js/jquery-1.11.1.min_044d0927.js"></script>
    <script type="text/javascript" src="${path}/jbs/js/jquery.bxslider_e88acd1b.js"></script>

    <script type="text/javascript" src="${path}/jbs/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="${path}/jbs/js/menu.js"></script>

    <script type="text/javascript" src="${path}/jbs/js/select.js"></script>

    <script type="text/javascript" src="${path}/jbs/js/lrscroll.js"></script>

    <script type="text/javascript" src="${path}/jbs/js/iban.js"></script>
    <script type="text/javascript" src="${path}/jbs/js/fban.js"></script>
    <script type="text/javascript" src="${path}/jbs/js/f_ban.js"></script>
    <script type="text/javascript" src="${path}/jbs/js/mban.js"></script>
    <script type="text/javascript" src="${path}/jbs/js/bban.js"></script>
    <script type="text/javascript" src="${path}/jbs/js/hban.js"></script>
    <script type="text/javascript" src="${path}/jbs/js/tban.js"></script>

    <script type="text/javascript" src="${path}/jbs/js/lrscroll_1.js"></script>

    <link rel="icon" href="<%=path%>/jbs/images/ico.ico" type="image/x-icon">
    <title>注册-青鸟优选</title>
</head>
<body>
<div class="log_bg">
    <div class="top">
        <div class="logo"><a href="${path}/ShopPage/index.jsp"><img src="${path}/jbs/images/logo.png"/></a></div>
    </div>
    <div class="regist">
        <div class="log_img"><img src="${path}/jbs/images/l_img.png" width="611" height="425"/></div>
        <div class="reg_c">
            <form id="myForm" action="${path}/Register">
                <table border="0" style="width:420px; font-size:14px; margin-top:20px;" cellspacing="0" cellpadding="0" class="op_Table">
                    <tr height="50" valign="top">
                        <td width="95">&nbsp;</td>
                        <td>
                            <span class="fl" style="font-size:24px;">注册</span>
                            <span class="fr">已有商城账号，<a href="${path}/jbs/Login.jsp" style="color:#ff4e00;">我要登录</a></span>
                        </td>
                    </tr>
                    <tr height="50">
                        <td align="right"><font color="#ff4e00">*</font>&nbsp;用户名 &nbsp;</td>
                        <td><input id="username" name="username" type="text" value="" class="l_user" required
                                   onblur="checkUsername()"/><span id="suserName" class="ErrorInfo"></span></td>
                    </tr>
                    <tr height="50">
                        <td align="right"><font color="#ff4e00">*</font>&nbsp;密码 &nbsp;</td>
                        <td><input id="password" name="password" type="password" value="" class="l_pwd" required
                                   onblur="checkUserpass()"/><span id="sPwd" class="ErrorInfo"></span></td>
                    </tr>
                    <tr height="50">
                        <td align="right"><font color="#ff4e00">*</font>&nbsp;确认密码 &nbsp;</td>
                        <td><input id="repwd" type="password" value="" class="l_pwd" required
                                   onblur="checkRePassword()"/><span id="sRPwd" class="ErrorInfo"></span></td>
                    </tr>
                    <tr height="50">
                        <td align="right"><font color="#ff4e00">*</font>&nbsp;邮箱 &nbsp;</td>
                        <td><input id="email" name="email" type="text" value="" class="l_email" required
                                   onblur="checkEmail()"/><span id="sEmail" class="ErrorInfo"></span></td>
                    </tr>
                    <tr height="50">
                        <td align="right"><font color="#ff4e00">*</font>&nbsp;手机 &nbsp;</td>
                        <td><input id="phone" name="phone" type="text" value="" class="l_tel" required
                                   onblur="checkPhone();" /><span  class="ErrorInfo" id="suserPhone"></span></td>
                    </tr>
                    <tr>
                        <td align="right"></td>
                    <td>
                        <p style="color:red;align-content: center">${msg}</p>
                    </td>
                    </tr>


                    <tr height="60">
                        <td>&nbsp;</td>
                        <td><a value="立即注册" class="log_btn" onclick="btnSubmit()" style="display: inline-block;padding-top: 10px">立即注册</a></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
<!--End Login End-->
<!--Begin Footer Begin-->
<div class="btmbg">
    <div class="btm">
        <a href="https://beian.miit.gov.cn">备案/许可证编号：鄂ICP备20008779号-1</a> <br />本站仅供个人学习实践，无实际购买功能
    </div>
</div>
<!--End Footer End -->

</body>
<script>
    function btnSubmit(){
        if(checkUsername()){
            if(checkPhone()){
                if(checkUserpass()){
                    if(checkRePassword()){
                        if(checkEmail()){
                            document.getElementById("myForm").submit();
                        }
                    }
                }
            }

        }
    }
    //验证用户名
    function checkUsername() {
        let username = document.getElementById("username").value;
        let spanNode = document.getElementById("suserName");
        if (username === "") {
            spanNode.innerHTML="用户名不能为空!";
            return false;
        }
        if (username.length >= 2 && username.length <= 10) {
            spanNode.innerHTML="";
            return true;
        } else {
            spanNode.innerHTML="用户名不符合规范！"
        }
    }

    //验证密码
    function checkUserpass() {
        let userpass = document.getElementById("password").value;
        let spanNode = document.getElementById("sPwd");
        if (userpass === "") {
            spanNode.innerHTML="密码不能为空！";
            return false;
        }
        if (userpass.length >= 6 && userpass.length <= 16) {
            spanNode.innerHTML="";
            return true;
        } else {
            spanNode.innerHTML="密码不符合命名规范";
        }
    }

    //确认密码
    function checkRePassword() {
        let userpass = document.getElementById("password").value;
        let repwd = document.getElementById("repwd").value;
        let spanNode= document.getElementById("sRPwd");
        if (repwd === "") {
            spanNode.innerHTML="第二次密码不能为空！";
            return false;
        }
        if (repwd === userpass) {
            spanNode.innerHTML="";
            return true;
        } else {
            spanNode.innerHTML="两次输入密码不同";
        }
    }

    //验证手机号
    function checkPhone() {
        let userphone = document.getElementById("phone").value;
        let spanNode=document.getElementById("suserPhone");
        var reg = /^[0-9]{11}$/
        if (userphone === "") {
            spanNode.innerHTML="手机号不能为空！"
            return false;
        }
        if (reg.test(userphone)) {
            var bool =false
            checkPhoneAjax().done(function(result){
                if(result=="true"){
                    spanNode.innerHTML="手机号可以使用";
                    return bool= true;
                }else{
                    spanNode.innerHTML="手机号已被注册";
                    return bool= false;
                }
            })
            return bool;
        }else {
            spanNode.innerHTML="手机号不符合规范！"
            return false;
        }
        }
function checkPhoneAjax(){
    let userphone = document.getElementById("phone").value;
    let spanNode=document.getElementById("suserPhone");
        return jq.ajax({
        url:"${path}/CheckPhone",
        type:"post",
        data:"phone="+userphone,//请求的数据格式
        dataType:"text",//返回的数据格式
            async:false,
        //请求前调用的函数
        beforeSend:function(){
        },
        //请求成功调用的函数
        success:function(result){

        },
        //请求错误调用的函数
        error:function(){
        },
        complete:function (){
        },
    });
}
    //验证邮箱
    function checkEmail() {
        let useremail = document.getElementById("email").value;
        var spanNode = document.getElementById("sEmail");
        if (useremail === "") {
            spanNode.innerHTML="邮箱不能为空！";
            return false;
        }
        if (useremail.indexOf("@") !== -1) {
            spanNode.innerHTML="";
            return true;
        } else {
            spanNode.innerHTML="邮箱不符合命名规范";
            return false;
        }
    }

</script>

</html>
